/**
 * Created by xlt on 2017/5/2.
 */
import React from "react";
import {connect} from "react-redux";
import cookie from "react-cookie";
import {reset} from "../../actions";
import EditShoppingCartItem from "../../components/EditShoppingCartItem";
import ShoppingCartBottom from "../../components/ShoppingCartBottom";
import MallMenu from "../../components/MallMenu";
import {Link} from "react-router";

class editShoppingCart extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            isNoData: false,
            listItems: [],
            totalPrice: 0,
            selectedAll: true,
            bottomButtonCanClick: false,
            shoppingCartCount: 0
        }
    }

    componentWillMount() {
        document.title = "购物车";
    }

    componentDidMount() {
        this.handleLoad();
    }

    componentWillUnmount() {

    }

    componentWillReceiveProps(nextProps) {
        let shoppingCarItemList = nextProps.ShoppingCarItemList;
        let totalPrice = 0;
        this.setState({
            isNoData: shoppingCarItemList.length == 0,
            isLoading: false,
        });
        let selectedCount = 0;
        let shoppingCartCount = 0;
        if (shoppingCarItemList.length > 0) {
            console.log("_checkedAll--componentWillReceiveProps");
            shoppingCarItemList.map((item) => {
                console.log("_checkedAll--componentWillReceiveProps" + item.isChecked);
                if (item.isChecked) {
                    totalPrice += item.price * item.buyNumber;
                    selectedCount++;
                }
                shoppingCartCount += item.buyNumber;
            });
            this.addList(shoppingCarItemList);
        }
        this.setState({
            totalPrice: totalPrice,
            selectedAll: selectedCount != shoppingCarItemList.length,
            bottomButtonCanClick: selectedCount > 0,
            shoppingCartCount: shoppingCartCount
        });
    }

    addList(lists) {
        if (lists.length > 0) {
            this.setState({listItems: lists})
        }
    }

    handleLoad() {
        this.props.dispatch(reset("shoppingCarItemList"));
    }

    render() {
        if (this.state.isLoading) {
            return (
                <div className="loading"><span>Loading</span></div>
            );
        } else if (this.state.isNoData) {
            return (
                <div>
                    <div className="shopping-cart_no_data">
                        <Link to="mall/index" query={{categoryId: 0}}>
                            <img src="http://oeb6w1s1c.bkt.clouddn.com/170511165539865782485206.png"/>
                        </Link>
                    </div>
                    <MallMenu clickIndex="1" shoppingCartCount={this.state.shoppingCartCount}/>
                </div>
            );
        } else {
            return (
                <div>
                    <div className="shopping-cart-header">
                        <input className="shoppingCart" type="text" name="" value="购物车" readOnly="true"/>
                        <input className="finish" type="text" name="" value="完成" readOnly="true"
                               onClick={this._shoppingCart.bind(this)}/>
                    </div>
                    <div className="shopping-cart-header-divide">
                        <hr/>
                    </div>
                    <ul className="shopping-cart-ul">
                        {
                            this.state.listItems.map((item, index) => {
                                console.log("_checkedAll--render" + item.isChecked);
                                return (
                                    <EditShoppingCartItem key={index} item={item}
                                                          handleLoad={this.handleLoad.bind(this)}/>
                                )
                            })
                        }
                    </ul>
                    <ShoppingCartBottom handleLoad={this.handleLoad.bind(this)} totalPrice={this.state.totalPrice}
                                        selectedAll={this.state.selectedAll}
                                        canClick={this.state.bottomButtonCanClick}/>
                    <MallMenu clickIndex="1" shoppingCartCount={this.state.shoppingCartCount}/>
                </div>
            );
        }
    }

    _shoppingCart() {
        window.location.href = "/#/mall/shoppingCart"
    }

}

function mapStateToProps(state) {
    const {postsByApi} = state;
    const {
        isFetching,
        items: ShoppingCarItemList
    } = {
        isFetching: false,
        items: cookie.load("shoppingCarItemList") || []
    };
    return {
        ShoppingCarItemList
    };
}

export default connect(mapStateToProps)(editShoppingCart);